import React, { useState } from 'react'
import { Badge, TabBar } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import { useLocation, useNavigate } from 'react-router-dom'

function Tabbar() {
    let nav=useNavigate()
    let location=useLocation()
    const tabs = [
        {
          key: '/home',
          title: '首页',
          icon: <AppOutline />,
        },
        {
          key: '/todo',
          title: '高铁游',
          icon: <UnorderedListOutline />,
        },
        {
          key: '/message',
          title: '订单',
          icon:  <MessageOutline />,
        },
        {
          key: '/my',
          title: '个人中心',
          icon: <UserOutline />,
        },
      ]
  return (
    <div style={{position:'fixed',bottom:'0',left:'0',right:'0'}}>
      <TabBar onChange={(key)=>nav(key)} activeKey={location.pathname}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
    </div>
  )
}

export default Tabbar
